<template>
  <!-- 文章管理 -->
  <div class="articlemanager">
    <el-table :data="allArticleData" style="width: 100%">
      <el-table-column label="标题" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.title"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="内容" width="180px">
        <template #default="scope">
          <el-input v-model="scope.row.describe"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="重新上传md" width="180">
        <template #default="scope">
          <el-upload
            class="upload-demo"
            drag
            :action="`${baseURL}/administer/article/md`"
            :limit="1"
            :show-file-list="false"
            :with-credentials="true"
            :before-upload="mdBeforeUpload"
            :on-success="
              function (res) {
                mdUploadSuccess(res, scope.row._id);
              }
            "
          >
            <el-button size="mini" type="success">点击上传md</el-button>
          </el-upload>
        </template>
      </el-table-column>

      <el-table-column label="重传封面" width="180">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 80px"
            :src="baseURL + scope.row.coverUrl"
            :preview-src-list="[baseURL + scope.row.coverUrl]"
            :hide-on-click-modal="true"
          >
          </el-image>
          <el-upload
            class="upload-demo"
            drag
            :action="`${baseURL}/administer/article/cover`"
            :limit="1"
            :with-credentials="true"
            :before-upload="coverBeforeUpload"
            :on-success="
              function (res) {
                coverUploadSuccess(res, scope.row._id);
              }
            "
            :show-file-list="false"
          >
            <el-button size="mini" type="warning">重传封面</el-button>
          </el-upload>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="updateArticle(scope.row._id,{title:scope.row.title,describe:scope.row.describe})"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="deleteArticle(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ArticleManager",
  data() {
    return {
      allArticleData: [], //文章数据数组
    };
  },
  methods: {
    // 请求所有的文章数据
    async getArticles() {
      let { data } = await this.$axios({
        method: "GET",
        url: "/getdata/article",
      });
      if (data.code) return this.$message.error(data.message);
      this.allArticleData = data.data; // 所有文章数据给allArticle
    },
    // md文件上传之前调用的钩子函数
    mdBeforeUpload(file) {
      if (/^(.+)\.md$/.test(file.name)) {
        // 只有文件后缀名为.md时
        return true;
      } else {
        this.$message.error("只能上传.md后缀名的文件");
      }
    },
    // md文件上传成功后调用钩子函数
    mdUploadSuccess(res, id) {
      // md上传失败
      if (res.code) return this.$message.error(res.message);
      this.updateArticle(id, { mdUrl: res.mdUrl });
      // this.articleForm.mdUrl = res.mdUrl;  // 得到md的url地址
    },
    // 封面文件上传成功后调用钩子函数
    coverBeforeUpload(file) {
      if (file.status === "ready") {
        // 待上传状态时,对md校验
        const isJPG = file.raw.type === "image/jpeg";
        const isLt2M = file.raw.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      }
    },
    // 封面文件上传之前调用的钩子函数
    coverUploadSuccess(res,id) {
      if (res.code) return this.$message.error(res.message);
      this.updateArticle(id, { coverUrl: res.coverUrl });
    },
    // 修改文章数据
    async updateArticle(id, doc) {
      let { data } = await this.$axios({
        method: "POST",
        url: "/administer/article/update",
        data: { id, doc },
      });
      // console.log(data);
      this.getArticles();
    },
    // 删除文章
    async deleteArticle(id){
      let { data } = await this.$axios({
        method: "DELETE",
        url: "/administer/article/delete",
        data: {id},
      });
      this.getArticles();
    }
  },
  created() {
    this.getArticles();
  },
};
</script>

<style lang="less" scoped>
.el-table__row {
  padding: 0;
}
/deep/ .has-gutter th.is-leaf {
  width: 180px !important;
  margin-right: 20px !important;
  text-align: center;
}
/deep/ .has-gutter .is-leaf .cell {
  width: 120px;
}
.el-table__body .el-table__row /deep/ td {
  width: 190px !important;
  height: 100px !important;
  box-sizing: border-box;
}
/deep/ .cell .el-input {
  width: 180px;
}
/deep/ .cell .upload-demo {
  width: 180px;
  height: 40px;
  box-sizing: border-box;
}
/deep/ .cell .el-upload,
/deep/ .cell .el-upload-dragger {
  width: 100px;
  height: 40px;
  margin-left: 15px;
}
.el-image {
  margin-left: 30px;
}
/deep/ .cell .el-button--mini {
  vertical-align: middle;
  margin-top: 0px;
  float: right;
  width: 100px;
  padding: 0;
  min-height: 40px;
}
// /deep/ .el-table__body-wrapper .el-table__body tbody
</style>